<template>
  <div>
    <el-container>
      <el-aside width="250px" :class="{ aside_main_show: !asideStatus }">
        <el-row>
          <el-col :span="22">
            模块目录
          </el-col>
          <!-- 更多选项按钮 -->
          <el-col :span="2">
            <el-dropdown>
              <i class="el-icon-more" />
              <el-dropdown-menu slot='dropdown'>
                <el-dropdown-item @click.native="showChange8">
                  新增目录
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
        <el-row>
          <el-input v-model="filterText" suffix-icon="el-icon-search" placeholder="请输入" />
        </el-row>
        <el-row>
          <el-tree ref="tree" v-loading="loading1" class="filter-tree" :data="contentsData" :filter-node-method="filterNode" @node-click="handleNodeClick" :props="setProps">
            <span slot-scope="{ node, data }" width="100%">
              <i class="el-icon-folder" />
              <span style="margin-left: 10px">{{ node.label }}</span>
              <!-- 更多选项按钮 -->
              <el-dropdown style="position:absolute; right: 10px;">
                <i class="el-icon-more" />
                <el-dropdown-menu slot='dropdown'>
                  <el-dropdown-item @click.native="showChange1(data.id)">
                    新增目录
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="showChange2(data.id)">
                    编辑
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="showChange3(data.id)">
                    删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </el-tree>
        </el-row>
      </el-aside>
      <el-container>
        <!-- aside侧边栏按钮 -->
        <div class="aside_open_close"  @click="asideChange">
          <a-icon type="left" v-if="asideOpen"/>
          <a-icon type="right" v-else/>
        </div>
        <el-header style="position: relative; top: -60px;">
          <el-form v-model="infoParams">
            <el-row>
              <!-- 接口查询框部分 -->
              <el-col :span="6">
                <el-form-item label="接口名称"  label-width="80px">
                  <el-input v-model="infoParams.apiName" placeholder="请输入名称" />
                </el-form-item>
              </el-col>
              <el-col :span="6" type="flex" align="center">
                <el-form-item label="接口中文名称"  label-width="100px">
                  <el-input v-model="infoParams.apiCname" placeholder="请输入中文名称" />
                </el-form-item>
              </el-col>
              <el-col :span="6" type="flex" align="center">
                <el-form-item label="接口状态" label-width="80px">
                  <el-select clearable v-model="infoParams.apiStatus">
                    <el-option label="下线" value="2" />
                    <el-option label="发布" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2" type="flex" align="center">
                <el-button type="primary" @click="search">查询</el-button>
              </el-col>
              <el-col :span="2" type="flex" align="center">
                <el-button @click="reset">重置</el-button>
              </el-col>
              <!-- 新增接口按钮 -->
              <el-col :span="2" type="flex" align="center">
                <el-button type="primary" @click="showChange4">新增</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-header>
        <!-- 接口数据表格 -->
        <el-main style="position: relative; top: -60px;">
          <el-table
            border
            v-loading="loading2"
            :data="tableData"
            max-height="500px"
            :default-sort="{prop: 'id', order: 'ascending'}"
          >
            <el-table-column label="" type="index" align="center" fixed />
            <el-table-column label="接口名称" align="left" prop="apiName" />
            <el-table-column label="接口中文名称" align="left" prop="apiCname" />
            <el-table-column label="请求接口地址" align="left" prop="requestUrl" />
            <el-table-column label="请求协议" align="left" prop="requestMethod" />
            <el-table-column label="状态" align="left" prop="apiStatus">
              <template slot-scope="scope">
                <span v-if="scope.row.apiStatus == 1" style="margin-right: 8px;">
                  <i class="dotClass" style="background-color: #67C23A; float:left" />
                  <span style="float: left;">发布</span>
                </span>
                <span v-if="scope.row.apiStatus == 2" style="margin-right: 8px;">
                  <i class="dotClass" style="background-color: #F56C6C; float:left" />
                  <span style="float: left;">下线</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right">
              <template slot-scope="scope">
                <el-row :gutter="16">
                  <el-button v-if="scope.row.apiStatus == 1" type="text" size="small" @click.native.prevent="statusChange1(scope.row)">
                    下线
                  </el-button>
                  <el-button v-if="scope.row.apiStatus == 2" type="text" size="small" @click.native.prevent="statusChange2(scope.row)">
                    发布
                  </el-button>
                  <el-button v-if="scope.row.apiStatus == 1" type="text" size="small" @click.native.prevent="showChange5(scope.row)">
                    测试
                  </el-button>
                  <el-button v-if="scope.row.apiStatus == 2" type="text" size="small" @click.native.prevent="showChange6(scope.row)">
                    编辑
                  </el-button>
                  <el-button type="text" size="small" @click.native.prevent="showChange7(scope.row)">
                    删除
                  </el-button>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <!--下面展示总共条数和切换页面-->
          <div class="block">
            <el-pagination
              v-show="total > 0"
              background
              layout="total, prev, pager, next, sizes"
              :total="total"
              :page-sizes="[10, 20, 30, 40, 50]"
              :current-page.sync="pageForm.pageNum"
              :page-size="pageForm.pageSize"
              @pagination="getInfoData"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </div>
        </el-main>
      </el-container>
    </el-container>

    <!-- 目录新增和编辑 -->
    <el-dialog :title="moduleTitle" :visible.sync="show1" append-to-body>
      <el-form ref="moduleForm" :model="moduleForm" :rules="rule1">
        <el-row>
          <el-form-item label="目录名称" prop="moduleName">
            <el-input v-model="moduleForm.moduleName" placeholder="请输入名称" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="目录中文名称" prop="moduleCname">
            <el-input v-model="moduleForm.moduleCname" placeholder="请输入中文名称" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="描述" prop="remark">
            <el-input v-model="moduleForm.remark" placeholder="请输入描述" type="textarea" />
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="cancel1">取 消</el-button>
        <el-button type="primary" @click="submitModuleForm">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 目录删除 -->
    <el-dialog title="删除模块目录" :visible.sync="show2" append-to-body>
      <div>请问是否确定删除该项模块？</div>
      <div slot="footer">
        <el-button type="primary" @click="delModuleData">确定</el-button>
        <el-button @click="cancel2">取消</el-button>
      </div>
    </el-dialog>
    <!-- 接口新增和编辑 -->
    <el-dialog :title="infoTitle" :visible.sync="show3" append-to-body>
      <el-form ref="infoForm" :model="infoForm" :rules="rule2">
        <el-row :gutter="32">
          <el-col :span="12">
            <el-form-item label="接口名称" prop="apiName">
              <el-input v-model="infoForm.apiName" placeholder="请输入名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接口中文名称" prop="apiCname">
              <el-input v-model="infoForm.apiCname" placeholder="请输入中文名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="请求接口地址" prop="requestUrl">
            <el-input v-model="infoForm.requestUrl" placeholder="请输入地址" type="textarea" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="接口协议" prop="requestMethod">
              <el-select v-model="infoForm.requestMethod">
                <el-option label="GET" value="GET" />
                <el-option label="POST" value="POST" />
                <el-option label="PUT" value="PUT" />
                <el-option label="DELETE" value="DELETE" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否发布">
              <el-switch v-model="infoForm.apiStatus" active-color="#13ce66" active-value="1" inactive-value="2" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="cancel3">取 消</el-button>
        <el-button type="primary" @click="submitInfoForm">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 接口测试 -->
    <el-dialog title="接口测试" :visible.sync="show4" append-to-body>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-row>
            <el-col :span="18">
              输入参数
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="apiTest">测试</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-input v-model="testParam" placeholder="请输入可测试参数" type="textarea" resize="none" :autosize="{ minRows: 10}" />
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            响应结果
          </el-row>
          <el-row>
            <el-input v-model="testResponse" placeholder="此处输出响应结果" type="textarea" resize="none" :autosize="{ minRows: 11}" />
          </el-row>
        </el-col>
      </el-row>
      <div slot="footer">
        <el-button @click="cancel4">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 接口删除 -->
    <el-dialog title="删除接口" :visible.sync="show5" append-to-body>
      <div>请问是否确定删除该接口？</div>
      <div slot="footer">
        <el-button type="primary" @click="delInfoData">确定</el-button>
        <el-button @click="cancel5">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listModule, getModule, addModule, editModule, delModule, listInfo, addInfo, editInfo, delInfo, testApi, noApi, offApi } from '@/api/system/outapi/manage'

export default {
  name: 'Service',
  data() {
    return {
      loading1: false, // 目录遮罩层
      loading2: false, // 表格遮罩层
      showPop1: false, // 弹框开关
      showPop2: false, // 弹框开关
      show1: false, // 目录新增编辑表单弹窗开关
      show2: false, // 目录删除弹窗开关
      show3: false, // 接口新增编辑表单弹窗开关
      show4: false, // 接口测试弹窗开关
      show5: false, // 接口删除弹窗开关
      asideStatus: true, // 侧边栏开关
      asideOpen: true, // 侧边栏按钮
      vueId: null,
      total: 0, // 表格数据总条数
      moduleTitle: null, // 目录新增编辑表单弹窗标题
      infoTitle: null, // 接口新增编辑表单弹窗标题
      filterText: null, // 目录搜索关键字
      testParam: null, // 测试参数
      testResponse: null, // 测试响应
      contentsData: [], // 目录数据
      tableData: [], // 表格数据
      pageForm: { // 页面对象
        pageNum: 1,
        pageSize: 10
      },
      setProps: {
        label: 'moduleCname',
        children: 'children',
        showPop: false
      },
      moduleForm: { // 目录表单对象
        id: null,
        moduleName: null,
        moduleCname: null,
        parentId: null,
        remark: null,
        createTime: null, // 不传值
        createBy: null, // 不传值
        updateBy: null, // 不传值
        updateTime: null // 不传值
      },
      infoParams: { // 接口查询表单对象
        pageNum: null,
        pageSize: null,
        id: null,
        apiName: null,
        apiCname: null,
        requestUrl: null,
        moduleId: null,
        apiStatus: null,
        requestMethod: null,
        requestParam: null
      },
      infoForm: { // 接口表单对象
        id: null,
        apiName: null,
        apiCname: null,
        requestUrl: null,
        moduleId: null,
        remark: null, // 不传值
        apiStatus: null,
        createTime: null, // 不传值
        createBy: null, // 不传值
        updateBy: null, // 不传值
        updateTime: null, // 不传值
        requestMethod: null, // 不传值
        requestParam: null // 不传值
      },
      rule1: { // 目录新增编辑表单规则
        moduleName: [
          { required: true, message: '目录名称不能为空', trigger: 'blur' }
        ],
        moduleCname: [
          { required: true, message: '目录中文名称不能为空', trigger: 'blur' }
        ],
        remark: [
        { required: true, message: '描述不能为空', trigger: 'blur' }
        ]
      },
      rule2: { // 接口新增编辑表单规则
        apiName: [
          { required: true, message: '接口名称不能为空', trigger: 'blur' }
        ],
        apiCname: [
          { required: true, message: '接口中文名称不能为空', trigger: 'blur' }
        ],
        requestMethod: [
          { required: true, message: '请求接口协议不能为空', trigger: 'blur' }
        ],
        requestUrl: [
          { required: true, message: '请求接口地址不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.initVue()
  },
  methods: {
    initVue() { // 页面初始化
      this.initModule()
      this.initInfo()
      this.infoParams.pageNum = this.pageForm.pageNum
      this.infoParams.pageSize = this.pageForm.pageSize
      this.getModuleData()
      this.getInfoData()
    },
    initModule() { // 重置目录表单对象
      this.moduleForm = {
        id: null,
        moduleName: null,
        moduleCname: null,
        parentId: null,
        remark: null,
        createTime: null,
        createBy: null,
        updateBy: null,
        updateTime: null
      }
    },
    initParams() {
      this.infoParams = { // 重置参数表单
        pageNum: null,
        pageSize: null,
        id: null,
        apiName: null,
        apiCname: null,
        requestUrl: null,
        moduleId: null,
        apiStatus: null,
        requestMethod: null,
        requestParam: null
      }
    },
    initInfo() { // 重置接口表单对象
      this.infoForm = {
        id: null,
        apiName: null,
        apiCname: null,
        requestUrl: null,
        moduleId: null,
        remark: null,
        apiStatus: null,
        createTime: null,
        createBy: null,
        updateBy: null,
        updateTime: null,
        requestMethod: null,
        requestParam: null
      }
    },
    reset() { // 重置查询框
      this.infoParams.apiName = null
      this.infoParams.apiCname = null
      this.infoParams.apiStatus = null
    },
    search() { // 查询
      this.pageForm.pageNum = 1
      this.infoParams.pageNum = this.pageForm.pageNum
      this.infoParams.pageSize = this.pageForm.pageSize
      this.getInfoData()
    },
    asideChange() {
      this.asideStatus = !this.asideStatus 
      if (this.asideStatus) {
        this.asideOpen = true
      } else {
        this.asideOpen = false
      }
    },
    showChange1(id) { // 目录新增弹窗打开
      this.initModule()
      this.moduleForm.parentId = id
      this.moduleTitle = '新增目录'
      this.show1 = true
    },
    showChange2(id) { // 目录编辑弹窗打开
      this.moduleForm.id = id
      getModule(this.moduleForm.id).then(response => {
        this.moduleForm = response.data
        this.moduleTitle = '编辑目录'
        this.show1 = true
      })
    },
    showChange3(id) { // 目录删除弹窗打开
      this.moduleForm.id = id
      this.show2 = true
    },
    showChange4() { // 接口新增弹窗打开
      if (this.vueId == null) {
        this.$alert('请先选择模块', '无法新增', {
          confirmButtonText: '确定'
        })
      } else {
        this.initInfo()
        this.infoTitle = '新增接口'
        this.infoForm.apiStatus = '1'
        this.show3 = true
      }
    },
    showChange5(data) { // 接口测试弹窗打开
      this.infoForm = data
      this.show4 = true
    },
    showChange6(data) { // 接口编辑弹窗打开
      this.infoForm = data
      this.infoTitle = '编辑接口'
      this.show3 = true
    },
    showChange7(data) { // 接口删除弹窗打开
      this.infoForm.id = data.id
      this.show5 = true
    },
    showChange8() { // 目录根节点新增弹窗打开
      this.initModule()
      this.moduleForm.parentId = 0
      this.moduleTitle = '新增目录'
      this.show1 = true
    },
    cancel1() { // 目录新增编辑取消
      this.show1 = false
    },
    cancel2() { // 目录删除取消
      this.show2 = false
    },
    cancel3() { // 接口新增编辑取消
      this.show3 = false
    },
    cancel4() { // 接口测试关闭
      this.show4 = false
    },
    cancel5() { // 接口删除取消
      this.show5 = false
    },
    submitModuleForm() { // 提交新增编辑目录表单数据
      this.$refs["moduleForm"].validate(valid => {
        if (valid) {
          if (this.moduleForm.id == null) { // 新增
            addModule(this.moduleForm).then(response => {
              this.show1 = false
              this.initModule()
              this.getModuleData()
            })
          } else { // 编辑
            editModule(this.moduleForm).then(response => {
              this.show1 = false
              this.initModule()
              this.getModuleData()
            })
          }
        }
      })
    },
    submitInfoForm() { // 提交新增编辑接口表单数据
      this.$refs["infoForm"].validate(valid => {
        if (valid) {
          if (this.infoForm.id == null) { // 新增
            this.infoForm.moduleId = this.vueId
            addInfo(this.infoForm).then(response => {
              this.show3 = false
              this.initParams()
              this.pageForm.pageNum = 1
              this.infoParams.moduleId = this.vueId
              this.infoParams.pageNum = this.pageForm.pageNum
              this.infoParams.pageSize = this.pageForm.pageSize
              this.getInfoData()
            })
          } else { // 编辑
            editInfo(this.infoForm).then(response => {
              this.show3 = false
              this.getInfoData()
            })
          }
        }
      })
    },
    statusChange1(data) { // 下线接口
      this.infoForm.id = data.id
      offApi(this.infoForm).then(response => {
        this.initInfo()
        this.getInfoData()
      })
    },
    statusChange2(data) { // 发布接口
      this.infoForm.id = data.id
      noApi(this.infoForm).then(response => {
        this.initInfo()
        this.getInfoData()
      })
    },
    getModuleData() { // 获取目录数据
      this.loading1 = true
      listModule().then(response => {
        this.contentsData = response.rows
        this.loading1 = false
      })
    },
    delModuleData() { // 删除目录数据
      delModule(this.moduleForm.id).then(response => {
        this.show2 = false
        this.initModule()
        this.getModuleData()
      })
    },
    getInfoData() { // 获取表格数据
      this.loading2 = true
      listInfo(this.infoParams).then(response => {
        this.total = response.total
        this.tableData = response.rows
        this.loading2 = false
      })
    },
    delInfoData() { // 删除接口数据
      delInfo(this.infoForm.id).then(response => {
        this.show5 = false
        this.initInfo()
        this.getInfoData()
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.moduleCname.indexOf(value) !== -1
    },
    handleNodeClick(data) { // 点击目录节点
      this.vueId = data.id
      this.infoParams.moduleId = data.id
      this.getInfoData()
    },
    apiTest() { // 接口测试
      testApi(this.infoForm.id).then(response => {
        
      })
    },
    handleCurrentChange() { // 切换页面
      this.infoParams.moduleId = this.vueId
      this.infoParams.pageNum = this.pageForm.pageNum
      this.infoParams.pageSize = this.pageForm.pageSize
      this.getInfoData()
    },
    handleSizeChange(val) { // 切换页面大小
      this.infoParams.moduleId = this.vueId
      this.pageForm.pageNum = 1
      this.pageForm.pageSize = val
      this.infoParams.pageNum = this.pageForm.pageNum
      this.infoParams.pageSize = this.pageForm.pageSize
      this.getInfoData()
    }
  }
}
</script>
<style>
.el-aside {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.el-header {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.aside_main_show{
  display: none;
}
.aside_open_close{
  position: relative;
  left: 0;
  top: 40%;
  width: 18px;
  height: 60px;
  line-height: 60px;
  color: rgb(131,159,163);
  background-color: rgb(255, 255, 255);
  border-radius: 0 6px 6px 0;
  border: 1px rgb(198, 196, 196) solid;
  font-size: 20px;
  z-index: 1000;
  cursor: pointer;
}
.dotClass {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  margin-right: 3px;
  border-radius: 50%;
  display: block;
}
</style>
